/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.animated-close-icon {
  position: absolute;
  transform: rotate(-45deg);
  pointer-events: none;

  &, &:before, &:after {
    width: 1.125rem;
    height: .125rem;
    border-radius: .125rem;
    background-color: var(--secondary-text-color);
  }

  &:before, &:after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
  }

  &:before {
    transform: rotate(90deg);
  }

  @include animation-level(2) {
    &, &:before, &:after {
      transition: transform var(--slide-header-transition);
    }
  }

  &.state-back {
    transform: rotate(180deg);

    &:before {
      transform: rotate(45deg) scaleX(.75) translateY(-.375rem);
    }

    &:after {
      transform: rotate(-45deg) scaleX(.75) translateY(.375rem);
    }
  }
}

.animated-menu-icon {
  --color: var(--secondary-text-color);
  position: absolute;

  &, &:before, &:after {
    width: 1.125rem;
    height: .125rem;
    border-radius: .125rem;
    background-color: var(--color);
    transform: rotate(0);
  }

  @include animation-level(2) {
    &, &:before, &:after {
      transition: transform .25s;
    }
  }

  &:before, &:after {
    position: absolute;
    left: 0;
    content: "";
  }

  &:before {
    top: -.3125rem;
  }

  &:after {
    top: .3125rem;
  }

  &.state-back {
    transform: rotate(180deg);

    &:before {
      transform: rotate(45deg) scaleX(.75) translate(.375rem, -.1875rem);
    }

    &:after {
      transform: rotate(-45deg) scaleX(.75) translate(.375rem, .1875rem);
    }
  }
}

.animated-menu-close-icon {
  margin-top: -.625rem;

  &:before {
    top: .3125rem;
    opacity: 1;

    @include animation-level(2) {
      transition: transform .25s, opacity .125s 0s;
    }
  }

  &:after {
    top: .625rem;
  }

  &.state-back {
    transform: translate(0, .3125rem) rotate(135deg);

    &:before {
      transform: rotate(45deg);
      opacity: 0;
    }

    &:after {
      transform: translate(-.0rem, -.625rem) rotate(90deg);
    }
  }
  /* &.state-back {
    transform: rotate(135deg) translate(.25rem, -.1875rem);

    &:before {
      transform: rotate(45deg);
      opacity: 0;
    }

    &:after {
      transform: rotate(90deg) translate(-.625rem, 0rem);
    }
  } */
}

.animated-button-icon {
  > .tgico {
    position: absolute;
    height: 24px;
    line-height: 24px;
    
    body:not(.animation-level-0) & {
      animation: hide-icon .4s forwards ease-in-out;
    }

    @include animation-level(0) {
      visibility: hidden;
      animation: none !important;
    }
  }
}
